<template>
	<view>
		<!-- 自定义导航栏 -->
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="列表" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			</u-navbar>
		</view>

		<!-- 搜索 -->
		<view class="search">
			<u-search shape="square" :showAction="false"></u-search>
		</view>

		<!-- 头部筛选 -->
		<view class="top">
			<view>综合排序</view>
			<view>销量</view>
			<view>价格</view>
			<view>好评度</view>
			<view>店铺</view>
			<view>筛选</view>
		</view>

		<!-- 商品列表 -->
		<view class="wrap">
			<view class="box" v-for="item in List" :key="item.id" @click="goDetail(item.id)">
				<image :src="item.img" mode=""></image>
				<view class="box_right">
					<view class="box_right_title">{{item.goodsname}}</view>
					<view style="color: #FF6040;">¥{{item.price}}
						<del style="color: #ccc; margin-left: 20rpx;"><text space="nbsp">¥{{item.market_price}}</text></del>
					</view>
					<view class="box_text">双11限制</view>
					<view style="color: #ccc;">3565评论 <text style="margin-left: 20rpx;">99%好评</text></view>
				</view>
			</view>
		</view>

		<!-- 暂无数据页面 -->
		<!-- <view>暂无数据</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				List: [], // 列表页数据
				isShow: false // 控制页面有没有数据
			}
		},
		methods: {
			// 跳转到详情页
			goDetail(id){
				// console.log(id);
				uni.navigateTo({
					url:`/pages/detail/detail?id=${id}`
				})
			}
		},
		onLoad(e) {
			// console.log(e);
			this.$http({
				url: '/api/getgoodlist',
				data: {
					cateid: e.id,
					type: e.type
				}
			}).then((res) => {
				// console.log(res);
				if (res.data.code == 200) {
					// 判断当前分类页面又没有数据 没有数据显示暂无数据页面 有数据显示有数据页面
					if (res.data.list.goodData) {
						res.data.list.goodData.map((item, index) => {
							item.img = 'http://localhost:3000' + item.img
						})
						this.List = res.data.list.goodData
					}
				}
				console.log(this.List);
			})
		}
	}
</script>

<style scoped>
	.search {
		background-color: #FF6040;
		padding: 20rpx;
	}

	.top {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #FF6040;
		color: white;
		display: flex;
		justify-content: space-around;
	}

	.box {
		padding: 20rpx;
		display: flex;
	}

	.box image {
		width: 200rpx;
		height: 300rpx;
	}

	.box_text {
		width: 200rpx;
		height: 60rpx;
		background-color: #FF6040;
		border-radius: 25rpx;
		color: white;
		text-align: center;
		line-height: 60rpx;
	}

	.box_right {
		width: 450rpx;
		margin-left: 40rpx;
		margin-top: 20rpx;
		line-height: 70rpx;
	}

	.box_right_title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>